<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>图书管理系统</title>
  <style>
      .demo-carousel {
          height: 200px;
          line-height: 200px;
          text-align: center;
      }
  </style>

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <jsp:include page="../common/header.jsp" flush="true"/>
  <div style="padding: 30px;"></div>
  <!-- 搜索条件表单 -->
  <div class="demoTable layui-form">
    <div class="layui-inline">
      <input class="layui-input" name="bookName" id="bookName" autocomplete="off" placeholder="请输入书名">
    </div>
    <div class="layui-inline">
      <input class="layui-input" name="author" id="author" autocomplete="off" placeholder="请输入作者">
    </div>
    <div class="layui-inline">
      <div class="layui-input-block">
        <select name="cid" id="cid">
          <option value="">请选择书本类别</option>
          <c:forEach items="${category}" var="ctg">
            <option value="${ctg.cid}">${ctg.cname}</option>
          </c:forEach>
        </select>
      </div>
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
    <a style="margin-left: 70px" class="layui-btn layui-btn-normal" onclick="addBook();">添加图书</a>
  </div>
</div>
<div style="padding: 15px;"></div>
<table class="layui-hide" id="demo" lay-filter="action"></table>


</body>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript">

	layui.use(['layer', 'table', 'form', 'element', 'jquery'], function () {

		let table = layui.table;
		let form = layui.form;
		let $ = layui.jquery;
		let layer = layui.layer;

		// 导航栏初始化
		layui.element.init();
		// 执行一个table实例
		table.render({
			elem: '#demo',
			height: 550,
			url: '${pageContext.request.contextPath}/book/bookPage',
			title: '图书表',
			page: true,
			limit: 5,
			limits: [5, 10, 15, 20],
			cols: [
				[// 表头实例
					{type: 'checkbox', fixed: 'left'}
					, {field: 'bookId', title: '书本编号', width: 100, sort: true}
					, {field: 'name', title: '书名', width: 200}
					, {field: 'author', title: '作者', width: 200, sort: true}
					, {field: 'publish', title: '出版社', width: 200, sort: true}
					, {field: 'ISBN', title: 'ISBN', width: 150, sort: true}
					, {field: 'pubDate', title: '出版日期', width: 120, sort: true}
					, {field: 'stock', title: '库存', width: 100}
					, {field: 'price', title: '价格（￥）', width: 150, sort: true}
					// ,{field: 'introduction', title: '简介', width:150}
					, {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
				]
			],
			// 用于检索结果重载
			id: 'testReload'
		});

		let active = {
			reload: function () {
				let bookName = $('#bookName');
				let author = $('#author');
				let cid = $('#cid');
				table.reload('testReload', {
					method: 'POST',
					page: {
						curr: 1
					},
					where: {
						bookName: bookName.val(),
						author: author.val(),
						cid: cid.val()
					}
				})
			}
		}

		// 监听条件搜索
		$('.demoTable .layui-btn').on('click', function () {
			let type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		})

		// 监听表格行操作事件
		table.on('tool(action)', function (obj) {
			// 获取行数据
			let data = obj.data;
			// 获取lay-event的值
			let event = obj.event;
			// 对事件进行不同情况的处理
			if (event === 'detail') {
				// 查看
				layer.open({
					type: 2,
					title: '查看图书详情',
					skin: 'layui-layer-demo', // 加上边框
					area: ['800px', '600px'],
					method: 'POST',
					content: '${pageContext.request.contextPath}/book/queryById?' + "bookId=" + data.bookId
				})
			} else if (event === 'edit') {
				// 更新
				layer.open({
					type: 2,
					title: '更新图书信息',
					skin: 'layui-layer-demo',
					area: ['800px', '600px'],
					method: 'post',
					content: '${pageContext.request.contextPath}/book/edit?' + "bookId=" + data.bookId
				})
			} else if (event === 'del') {
				// 删除
				layer.confirm("确认删除该数据吗？", function (index) {
					$.ajax({
						url: '${pageContext.request.contextPath}/book/delBook?bookId=' + data.bookId,
						method: 'POST',
						dataType: 'json',
						success: function (res) {
							if (res.success) {
								obj.del();
								layer.alert(res.message, function () {
									window.location.reload();
									layer.close(index);
								})
							} else {
								layer.msg(res.message);
							}
						},
						error: function () {
							layer.msg("系统异常！")
						}
					})
				})
			}
		})


	})


	function addBook() {
		layer.open({
			type: 2,
			title: '查看图书详情',
			skin: 'layui-layer-demo', // 加上边框
			area: ['800px', '600px'],
			method: 'POST',
			content: '${pageContext.request.contextPath}/book/toAddBook'
		})
	}
</script>
</html>
